.var {
  &--box {
    box-sizing: border-box;

    * {
      box-sizing: border-box;
    }
  }

  &--lock {
    overflow: hidden !important;
  }

  &--ellipsis {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &--inline-block {
    display: inline-block;
  }

  &--flex {
    display: flex;
  }

  &--inline-flex {
    display: inline-flex;
  }
}

:root {
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --icon-size-xs: 16px;
  --icon-size-sm: 18px;
  --icon-size-md: 20px;
  --icon-size-lg: 22px;
  --hsl-body: 0, 0%, 100%;
  --color-body: hsla(var(--hsl-body), 1);
  --hsl-text: 0, 0%, 20%;
  --color-text: hsla(var(--hsl-text), 1);
  --hsl-primary: 220, 99%, 61%;
  --color-primary: hsla(var(--hsl-primary), 1);
  --hsl-info: 196, 100%, 47%;
  --color-info: hsla(var(--hsl-info), 1);
  --hsl-success: 164, 100%, 38%;
  --color-success: hsla(var(--hsl-success), 1);
  --hsl-warning: 37, 100%, 50%;
  --color-warning: hsla(var(--hsl-warning), 1);
  --hsl-danger: 4, 90%, 58%;
  --color-danger: hsla(var(--hsl-danger), 1);
  --hsl-disabled: 0, 0%, 88%;
  --color-disabled: hsla(var(--hsl-disabled), 1);
  --hsl-text-disabled: 0, 0%, 67%;
  --color-text-disabled: hsla(var(--hsl-text-disabled), 1);
  --hsl-on-primary: 0, 0%, 100%;
  --color-on-primary: hsla(var(--hsl-on-primary), 1);
  --hsl-on-info: 0, 0%, 100%;
  --color-on-info: hsla(var(--hsl-on-info), 1);
  --hsl-on-success: 0, 0%, 100%;
  --color-on-success: hsla(var(--hsl-on-success), 1);
  --hsl-on-warning: 0, 0%, 100%;
  --color-on-warning: hsla(var(--hsl-on-warning), 1);
  --hsl-on-danger: 0, 0%, 100%;
  --color-on-danger: hsla(var(--hsl-on-danger), 1);
  --hsl-primary-container: 220, 99%, 61%;
  --color-primary-container: hsla(var(--hsl-primary-container), 1);
  --hsl-info-container: 196, 100%, 47%;
  --color-info-container: hsla(var(--hsl-info-container), 1);
  --hsl-success-container: 164, 100%, 38%;
  --color-success-container: hsla(var(--hsl-success-container), 1);
  --hsl-warning-container: 37, 100%, 50%;
  --color-warning-container: hsla(var(--hsl-warning-container), 1);
  --hsl-danger-container: 4, 90%, 58%;
  --color-danger-container: hsla(var(--hsl-danger-container), 1);
  --hsl-on-primary-container: 0, 0%, 100%;
  --color-on-primary-container: hsla(var(--hsl-on-primary-container), 1);
  --hsl-on-info-container: 0, 0%, 100%;
  --color-on-info-container: hsla(var(--hsl-on-info-container), 1);
  --hsl-on-success-container: 0, 0%, 100%;
  --color-on-success-container: hsla(var(--hsl-on-success-container), 1);
  --hsl-on-warning-container: 0, 0%, 100%;
  --color-on-warning-container: hsla(var(--hsl-on-warning-container), 1);
  --hsl-on-danger-container: 0, 0%, 100%;
  --color-on-danger-container: hsla(var(--hsl-on-danger-container), 1);
  --hsl-surface-container: 0, 0%, 100%;
  --color-surface-container: hsla(var(--hsl-surface-container), 1);
  --hsl-surface-container-low: 0, 0%, 100%;
  --color-surface-container-low: hsla(var(--hsl-surface-container-low), 1);
  --hsl-surface-container-high: 0, 0%, 100%;
  --color-surface-container-high: hsla(var(--hsl-surface-container-high), 1);
  --hsl-surface-container-highest: 0, 0%, 100%;
  --color-surface-container-highest: hsla(var(--hsl-surface-container-highest), 1);
  --hsl-inverse-surface: 0, 0%, 20%;
  --color-inverse-surface: hsla(var(--hsl-inverse-surface), 1);
  --hsl-outline: 0, 0%, 0%;
  --color-outline: hsla(var(--hsl-outline), 0.12);
  --hsl-on-surface-variant: 0, 0%, 53%;
  --color-on-surface-variant: hsla(var(--hsl-on-surface-variant), 1);
  --opacity-disabled: 0.6;
  --opacity-hover: 0.15;
  --opacity-focus: 0.2;
  --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
}
